import React, { Component } from 'react'
import { Card, Button, Table, message, Modal } from 'antd'
import table_columns from './table.jsx'
import UserEdit from './edit.jsx'
import { list, deleteById } from '@/api/user-api.js'
const { confirm } = Modal

/**
 * 用户管理
 */
export default class index extends Component {
  state = {
    tableData: [],
    pageNum: 1,
    pageSize: 10,
    pageTotal: 0,
    searchType: null,
    searchName: null,
    roles: [],
  }
  toEdit = (v) => {
    this.form.showModal(v)
  }
  toDelete = (id) => {
    const self = this
    confirm({
      title: '确认要删除该条数据吗?',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        deleteById(id).then((v) => {
          if (v.status == 0) {
            message.success('删除成功')
            self.page()
          }
        })
      },
      onCancel() {},
    })
  }
  componentDidMount() {
    this.page()
  }
  page = () => {
    list().then((v) => {
      if (v.status == 0) {
        this.setState({
          tableData: v.data.users,
          roles: v.data.roles,
        })
      }
    })
  }
  render() {
    const title = (
      <Button type="primary" onClick={this.toEdit}>
        创建用户
      </Button>
    )
    return (
      <Card title={title} bordered={false}>
        <Table
          bordered
          columns={table_columns(this)}
          pagination={{
            showQuickJumper: true,
            defaultCurrent: this.state.pageNum,
            defaultPageSize: this.state.pageSize,
            total: this.state.pageTotal,
            // showTotal: (total) => `总计${total}页`,
          }}
          onChange={this.changePage}
          loading={this.state.loading}
          dataSource={this.state.tableData}
          rowKey="_id"
        />
        <UserEdit
          getList={this.page}
          wrappedComponentRef={(form) => (this.form = form)}
        />
      </Card>
    )
  }
}
